import React, { useEffect } from "react";
import { useECharts } from "../hooks/echart";
import * as echarts from "echarts";
import allData from '../../src/pages/assets.json';
import geo from '../pages/geo.json';
function EarthPage() {
    const option: any = {
        backgroundColor: "#404a59",
        title: {
            text: "朴姓人口迁徙图",
            left: "center",
            textStyle: {
                color: "#fff",
            },
        },
        legend: {
            show: false,
            orient: "vertical",
            top: "bottom",
            left: "right",
            data: [ "地点", "线路" ],
            textStyle: {
                color: "#fff",
            },
        },
        geo: {
            map: geo,
            label: {
                emphasis: {
                    show: false,
                },
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: "#323c48",
                    borderColor: "#404a59",
                },
                emphasis: {
                    areaColor: "#2a333d",
                },
            },
        },
        series: [
            {
                name: "地点",
                type: "effectScatter",
                coordinateSystem: "geo",
                zlevel: 2,
                rippleEffect: {
                    brushType: "stroke",
                },
                label: {
                    emphasis: {
                        show: true,
                        position: "right",
                        formatter: "{b}",
                    },
                },
                symbolSize: 2,
                showEffectOn: "render",
                itemStyle: {
                    normal: {
                        color: "#46bee9",
                    },
                },
                data: allData.citys,
            },
            {
                name: "线路",
                type: "lines",
                coordinateSystem: "geo",
                zlevel: 2,
                large: true,
                effect: {
                    show: true,
                    constantSpeed: 30,
                    symbol: "pin",
                    symbolSize: 3,
                    trailLength: 0,
                },
                lineStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "#58B3CC",
                                },
                                {
                                    offset: 1,
                                    color: "#F58158",
                                },
                            ],
                            false
                        ),
                        width: 1,
                        opacity: 0.2,
                        curveness: 0.1,
                    },
                },
                data: allData.moveLines,
            },
        ],
    };
    const [ chartRef, chartInstance ] = useECharts({ options: option });
    useEffect(() => {
        if (chartInstance) {
            // Do something with chartInstance
        }
    }, [ chartInstance ]);
    return (
        <div style={{ height: "100%" }}>
            <div ref={chartRef} style={{ height: "100%" }} />
        </div>
    );
}

export default EarthPage;
